<template>
  <!-- 金融产品申报详情页 -->
  <div class="layout">
    <ContainerTitle :text="detailType ? '金融产品申报详情页' : '金融产品申报编辑页'"></ContainerTitle>
    <div class="b-wrap">
      <div class="b-title">
        {{ myDeclareFinanceProductDetail.productTitle }}
      </div>
      <div class="tip">
        申报审核状态：<span
          :style="
            myDeclareFinanceProductDetail.stateName == '审核通过'
              ? 'color:#10a217'
              : myDeclareFinanceProductDetail.stateName == '审核未通过'
              ? 'color:#d00000'
              : ''
          "
        >
          {{ myDeclareFinanceProductDetail.stateName }}
        </span>
      </div>
    </div>
    <div class="tableDiv">
      <div class="rowDiv">
        <div class="keyDiv">合作银行</div>
        <div class="valueDiv">
          {{
            $selectDict(bank, myDeclareFinanceProductDetail.bank).dictLabel
          }}
        </div>
        <div class="keyDiv">金融产品类型</div>
        <div class="valueDiv">
          {{
            $selectDict(typeList, myDeclareFinanceProductDetail.type)
              .dictLabel
          }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">贷款对象</div>
        <div class="valueDiv">
          {{
            $selectDict(objectList, myDeclareFinanceProductDetail.object)
              .dictLabel
          }}
        </div>
        <div class="keyDiv">贷款金额</div>
        <div class="valueDiv">
          {{
            $selectDict(amountList, myDeclareFinanceProductDetail.amount)
              .dictLabel
          }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">发文部门</div>
        <div class="valueDiv">
          {{
            $selectDict(
              department,
              myDeclareFinanceProductDetail.publishDepartment
            ).dictLabel
          }}
        </div>
        <div class="keyDiv">发文时间</div>
        <div class="valueDiv">
          {{ myDeclareFinanceProductDetail.publishTime || "无" }}
        </div>
      </div>
      <div class="rowDiv">
        <div class="keyDiv">申报期限</div>
        <div class="valueDiv">
          {{ myDeclareFinanceProductDetail.applyStartTime }} 至
          {{ myDeclareFinanceProductDetail.applyEndTime }}
        </div>
        <div class="keyDiv">浏览量</div>
        <div class="valueDiv">
          {{ myDeclareFinanceProductDetail.views || "0" }}
        </div>
      </div>
    </div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="121px"
      style="text-align: left; margin-top: 40px"
    >
      <el-form-item label="审核时间：">
        <span>{{ myDeclareFinanceProductDetail.checkTime }}</span>
      </el-form-item>
      <!-- <el-form-item label="申请理由：" prop="applyReason">
        <el-input
          type="textarea"
          :disabled="detailType"
          resize="none"
          :maxlength="300"
          show-word-limit
          :autosize="{ minRows: 4, maxRows: 4 }"
          v-model.trim="detail.applyReason"
          :show-word-limit="true"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="申请理由:" prop="applyReason">
        <el-input
          type="textarea"
          v-model.trim="ruleForm.applyReason"
          :disabled="detailType"
          resize="none"
          maxlength="300"
          show-word-limit
          :rows="4"
          placeholder="请输入申请理由"
          class="reason-input"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传申请资料：">
        <div
          class="material"
          v-for="(file, index) in fileList"
          :key="index"
          v-if="detailType"
        >
          <span @click="downLoad(file)">{{ file.fileName }}</span>
        </div>
        <addUpload
          v-if="!detailType"
          @changeUp="changeUp"
          :fileList="fileList"
        ></addUpload>
      </el-form-item>
      <el-form-item
        style="text-align: center; margin-top: 40px"
        v-if="!detailType"
      >
        <Buttons @goBack="goBack" @submitForm="submitForm('ruleForm')" :buttons="buttons"></Buttons>
        <!-- <el-button @click="goBack()" class="apply-btn">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          class="apply-btn"
          style="background: #0053bc"
          >申请</el-button
        > -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import addUpload from "@/components/financiaUpload";
import { getApplyDetails, agetFile, subForm } from "@/common/api/company.js";
export default {
  components: {
    addUpload,
  },
  data() {
    return {
      buttons: [
        { text: "取消", type: "normal", size: "l", method: "goBack" },
        { text: "申请", type: "success", size: "l", method: "submitForm" },
      ],
      name: "finance",
      productId: "",
      crumbs: [
        {
          label: "企业空间",
          value: "company",
        },
        {
          label: "金融服务",
          value: "finance",
        },
        {
          label: "我申报的金融产品",
          value: "myDeclareFinanceProduct",
        },
        {
          label: "金融产品申报详情页",
          value: "",
          choose: true,
        },
      ],
      ruleForm: {
        // 表单
        productId: "",
        productName: "",
        applyReason: "",
        material: "",
      },
      myDeclareFinanceProductDetail: [],
      bank: [],
      department: [],
      state: [],
      detail: {},
      detailType: true,
      fileList: [],
      amountList: [],
      typeList: [],
      rules: {
        applyReason: [
          { required: true, message: "请填写申请理由", trigger: "blur" },
        ],
      },
      objectList: [],
    };
  },

  mounted() {
    this.productId = this.$route.query.productId;
    // 如果type有值说明是编辑页
    let type = this.$route.query.type;
    if (type) {
      this.detailType = false;
    }
    this.getList();
    this.getDict();
  },
  methods: {
    // finance/financeProduct/get
    async getList() {
      let res = await getApplyDetails(this.productId);
      if (res.code == 200) {
        this.myDeclareFinanceProductDetail = res.data;
        this.ruleForm.productName = res.data.productTitle;
        this.ruleForm.applyReason = res.data.applyReason;
        this.ruleForm.productId = res.data.productId;
        this.agetFile(res.data.material);
        console.log(this.myDeclareFinanceProductDetail);
      }
    },
    // 附件列表
    async agetFile(id) {
      let param = {
        batchId: id,
      };
      let res = await agetFile(param);
      if (res.rows.length) {
        this.fileList = res.rows;
        if (!this.detailType) {
          // let arr = [];
          // for (let i in res.rows) {
          //   arr.push(res.rows[i].batchId);
          // }
          this.ruleForm.material = res.rows[0].batchId;
        }
      }
    },
    // 下载
    downLoad(item) {
      window.location.href = item.filePath;
    },
    changeUp(obj) {
      console.log("obj", obj);
      // let arr = [];
      // for (let i in obj) {
      //   arr.push(obj[i].batchId);
      // }
      if (obj.length) {
        this.ruleForm.material = obj[0].batchId;
      }
      this.fileList = [];
    },
    /**
     * 立即申请触发
     * @param formName 表单
     * @return {void}
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.ruleForm.material) {
            this.$message("请选择上传附件");
          }
          this.subForm();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 提交请求接口
     * @param {void}
     * @return {void}
     */
    async subForm() {
      this.ruleForm.delId = this.myDeclareFinanceProductDetail.id;
      let res = await subForm(this.ruleForm);
      if (res.code == 200) {
        console.log(this.ruleForm, res);
        this.$message.success("立即申请成功");
        this.$router.back();
      } else {
        this.$message.error(res.msg);
      }
    },
    // 字典
    async getDict() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`finance_product_bank,finance_publish_department,finance_product_apply_state,finance_product_object,finance_product_amount,finance_product_type`).then(res => {
        this.bank = res.finance_product_bank;
        this.department = res.finance_publish_department;
        this.state = res.finance_product_apply_state;
        this.objectList = res.finance_product_object;
        this.amountList = res.finance_product_amount;
        this.typeList = res.finance_product_type;
      })
    },
    /**
     * 返回上一页
     */
    goBack: function () {
      this.$router.back();
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  width: 1000px;
  margin: 20px 0;
}
.backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.roomDiv {
  display: flex;
  justify-content: center;
  padding-bottom: 46px;
}
.apply-btn {
  padding: 13px 44px;
}
.roomDiv .leftDiv {
  width: 200px;
  text-align: left;
}

.roomDiv .rightDiv {
  width: 800px;
  margin-left: 30px;
  margin-bottom: 50px;
}
.titleDiv {
  border-bottom: 2px solid #045db9;
  text-align: left;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  color: #045db9;
  margin-bottom: 20px;
}
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.b-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}
.b-wrap .b-title {
  color: #333;
  font-weight: bold;
  font-size: 24px;
  text-align: left;
}
.b-wrap .tip {
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
}
.b-wrap .tip span {
  color: rgba(4, 93, 185, 1);
}
.tableDiv {
  font-size: 15px;
  border: 1px solid #eeeeee;
  color: #666666;
}

.tableDiv .rowDiv {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #eeeeee;
}

.tableDiv .rowDiv:last-of-type {
  border-bottom: none;
}

.tableDiv .rowDiv .keyDiv {
  flex-shrink: 0;
  padding: 10px;
  background-color: #f4f4f4;
  width: 90px;
  font-size: 14px;
  color: #333;
  text-align: right;
}

.tableDiv .rowDiv .valueDiv {
  padding: 10px;
  width: 40%;
  font-size: 14px;
  text-align: left;
}

.tableDiv .rowDiv .valueDiv img:hover {
  cursor: pointer;
}
.material {
  display: flex;
  align-items: center;
}
.material span:first-of-type {
  margin-right: 10px;
}
.material span:last-of-type {
  color: #045db9;
  cursor: pointer;
}
</style>